<template>
  <div class="single-list-filter-wrapper" @click.stop="clickBlank()">
    <div class="top-text-wrapper" @click.stop="showSingleListDialog()">
      <p class="left-select-text">{{placeHolderText}}</p>
    </div>
    <div class="drop-down-wrapper-group" ref="doubleDown" v-show="showDropDown">
      <ul v-if="filter">
        <li v-for="(item,index) in dataList" class="group-parent-ul-wrapper">
          <div class="group-filter-parent">
            <check-box :checkDataItem="item"></check-box>
          </div>
          <div>
            <ul v-if="item.childrenList" class="group-children-ul-wrapper">
              <li v-for="(itemChild,indexChild) in item.childrenList">
                <div class="double-filter-object">
                  <check-box :checkDataItem="itemChild"></check-box>
                </div>
              </li>
            </ul>
          </div>
        </li>
      </ul>
      <div class="divider-line-filter"></div>
      <div class="confirm-btm-wrapper">
        <p class="double-confirm-btn" @click.stop="clickConfirm()">确定</p>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import CheckBox from './check-box/check-box.vue'
  import {bus} from './js/bus.js';
  const TAG = 'doubleCheckFilter'

  export default {
    components: {
      CheckBox
    },
    props: {
      doubleListData: {
        type: Array,
        default() {
          return []
        }
      },
      defaultText: {
        type: String,
        default() {
          return ''
        }
      },
      filter: {
        type: Object,
        default: null
      },
      type: {
        type: String,
        default: null
      }
    },
    created() {
      bus.$on('showDropDownDialog', (emitTag) => {
        if (emitTag == this._uid) {
          // 显示待选项
          this.showDropDown = !this.showDropDown
        } else {
          this.showDropDown = false
        }
      });
    },
    data() {
      return {
        placeHolderText: this.defaultText,
        currentSelectPosition: -1,
        showDropDown: false,
        firstItem: {},
        dataList: []
      }
    },
    methods: {
      selectCurrentSingleObject(item, index) {
        // 选择列表项目
        this.placeHolderText = item.name
        this.currentSelectPosition = index
      },
      showSingleListDialog() {
        // 通过发送时间消息显示当前下拉框，关闭其他下拉框
        bus.$emit('showDropDownDialog', this._uid)
      },
      clickConfirm() {
        let chooseList = [];
        let originData = this.filter.sjy;
        if (this.type == 'freeType') {
          originData = originData.freeType
        }
        originData.map((item, index) => {
          if (item.checked) {
            chooseList.push(item.selectId)
          }
        })
        this.$emit('confirmDoubleSelect', chooseList);
        this.showDropDown = false;
      },
      clickBlank() {
      }
    },
    planAreaSelect(){
      this.clickConfirm()
    },
    mounted(){
      document.querySelector('body').addEventListener("click", () => {
        this.showDropDown = false
      });
      if (this.type == 'hospital') {
        // 转换childrenList中的键值对为selectId,selectName
        this.filter.sjy.forEach((item) => {
          item.selectId = item.id
          item.selectName = item.name
          if (item.childrenList) {
            item.childrenList.forEach((item1) => {
              item1.selectId = item1.hospitalId
              item1.selectName = item1.hospitalName
            })
          }
        })
        this.dataList = this.filter.sjy.reverse();
      }
      console.log(JSON.stringify(this.dataList))
    }
  };
</script>

<style lang="scss">
  @import "topFilter.css";

</style>
